<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>caseFour</title>
</head>
<style>
  /*清除默认的样式*/
    *{
      margin: 0;
      padding: 0;
    }
  div{
    background-color: pink;
    width: 640px;
    height: 50px;
    margin: 0 auto;
  }
  a{
    float: left;
    display: inline-block;
    width: 80px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    color: white;
    text-decoration: none;

  }
  ul{
    list-style: none;
  }
  a:hover{
    background-color: green;
  }
</style>
<body>
  <div>
    <ul>
     <li><a href="#">导航1</a></li>
     <li><a href="#">导航2</a></li>
     <li><a href="#">导航3</a></li>
     <li><a href="#">导航4</a></li>
     <li><a href="#">导航5</a></li>
     <li><a href="#">导航6</a></li>
     <li><a href="#">导航7</a></li>
     <li><a href="#">导航8</a></li>
    </ul>
  </div>
</body>
</html>
